<template>

    <div class="wraper">

        <el-card  >

            <template #header>
				<div class="card-header">
                        云音乐管理系统登录3333333
				</div>
			</template>



            <el-form ref="ruleFormRef" style="max-width: 600px" status-icon 
                label-width="auto" class="demo-ruleForm">
                <el-form-item label="用户名" >
                    <el-input type="text"  v-model="userLogin.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码"  >
                    <el-input  type="password"  v-model="userLogin.password"  />
                </el-form-item>
           
                <el-form-item>
                    <el-button type="primary"  @click="login" >
                        登录
                    </el-button>
                    <el-button >Reset</el-button>
                </el-form-item>
            </el-form>



        </el-card>


    </div>


</template>

<style scoped>
.wraper {
    width: 100%;
    height: 100%;
    background-color: cadetblue;
    overflow: hidden;
}

.el-card  {

    width: 500px;
    margin: 0 auto;
    margin-top: 200px;
   

}
</style>
<script setup>
import { ref } from 'vue';
import {
		ElMessage
	} from 'element-plus'

    const  userLogin =ref({
        username:"",
        password:""
    });

    import { useRoute,useRouter } from 'vue-router';

    const    router  = useRouter();


    const  login  =()=>{

     fetch(`http://localhost:3000/users?username=${userLogin.value.username}`).then(res=>res.json()).then(data=>{
        if(data.length>0){
                    if(data[0].password ===userLogin.value.password){

                        localStorage.setItem("token",data[0].token);
                        localStorage.setItem("loginInfo",JSON.stringify(data[0]))
                        localStorage.setItem("loginUsername",data[0].username) //把用户名存储了
                        localStorage.setItem("loginNickname",data[0].nickName) //把用户名存储了
                        
                        ElMessage.success('登录成功')
                        router.push({path:'/'})
                    }else{
                        ElMessage.success('密码错误')
                    }
        }else{
            ElMessage.success('用户名不存在')

        }

     })

    }



</script>